---
type: playground
order: 201
---
<style>
  .content {
     max-width: none !important;
     margin-left: 0 !important;
     padding: 1em 0 0 0;
  }
  
  .validation {
     margin-top: 1em;
     margin-left: 1em;
     color: red;
     text-transform: capitalize;
  }
  
  .CodeMirror {
     min-height: 500px !important;
  }
  
  h1 {
    margin-bottom: 0.5em !important;
  }
  
  h3 {
    margin: 1em !important;
    width: unset;
    height: unset;
  }
  
  iframe {
     border: 0;
     margin: 0 !important;
  }
  
  #render-editor {
     width: 100%;
  }
  
  #editor-wrap {
     background-color: rgb(252,252,252);
     padding: 0;
     margin: 0;
     display: none;
  }
  
  .preview {
     padding: 5px;
     overflow: auto;
  }
 
  .editor-row {
      display: flex; 
      margin-bottom: 1em; 
      width: 100% !important;
  }
  
   .data-row {
      display: flex;
   }
   
  .preview-col {
      width: 60%; 
      flex: 1; 
      background: rgb(252,252,252);
   }
  
  .editor-area {
      border: 1px solid #f48a4259;
  }
   
  .config-col {
      color: rgba(0,0,0,.6); 
      background: rgb(252,252,252); 
      margin-right: 2em; 
      width: 40%; 
  }
  
  .input-col {
      width: 49%;
      padding-right: 2%;
  }
  
  .output-col {
      width: 49%;
  }
  .hidden {
      display: none !important;
  }
  
  .message {
    width: 90%;
    max-width: 1000px;
    margin: 1em auto 3em auto;    
  } 
  .grid { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 0;
  }
  
  .column {
    width: 20% !important;
  }
  .use-template {
    font-weight: normal!important;
  }
  .use-template:hover {
    border-bottom: 1px dashed darkorange;
  }

  @font-face {
    font-family: 'Icons';
    src: url("/fonts/icons.eot");
    src: url("/fonts/icons.eot?#iefix") format('embedded-opentype'), url("/fonts/icons.woff2") format('woff2'), url("/fonts/icons.woff") format('woff'), url("/fonts/icons.ttf") format('truetype'), url("/fonts/icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
  }
  i.icon {
    opacity: 0.75;
    display: inline-block;
    margin: 0 0.25rem 0 0;
    width: 1.18em;
    height: 1em;
    font-family: 'Icons';
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  i.icon:before {
    background: none !important;
  }
  i.icon.sound:before {
    content: "\f025";
  }
  i.icon.image:before {
    content: "\f03e";
  }
  i.icon.code:before {
    content: "\f121";
  }
  i.icon.font:before {
    content: "\f031";
  }
  i.icon.video:before {
    content: "\f03d";
  }
  i.icon.share:before {
    content: "\f064"
  }
  i.icon.copy.outline:before {
    content: "\f0c5"
  }
  i.icon.archive:before {
    content: "\f187";
  }
  i.icon.eye:before {
    content: "\f06e";
  }
  i.icon.bullseye:before {
    content: "\f140";
  }
  i.icon.vector.square:before {
    content: "\f5cb";
  }

  .share-buttons {
    float:right;
    margin: 1.2em 1em 1em 1em;
  }
  .share-buttons i {
    cursor: pointer;
    opacity: 0.5 !important;
    color: #f58a48;
    transition: 0.25s;
  }
  .share-buttons i:hover {
    opacity: 1 !important;
    transition: 0.25s;
  }

  .intro { 
    max-width: 700px; 
    margin: 0 auto;  
    margin-top: 1.5em;
  }

@media screen and (max-width: 900px) {
@media only screen and (max-width: 767.98px) {
    .intro {
      padding-left: 0;
    }
    .grid {
      width: auto;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .column {
      width: 100% !important;
      margin: 0 0 !important;
      -webkit-box-shadow: none !important;
              box-shadow: none !important;
      padding: 1rem 1rem !important;
    }

    .editor-row {
        flex-direction: column;
    }
    .data-row {
        flex-direction: column;
    }
    .preview-col {
        width: 100%;
    }
    .config-col {
        width: 100%;
    }
    .input-col, .output-col { 
        width: 100%; 
    }
}
</style>

<script src="js.cookie.js"></script>

<!-- html -->

<div class="intro">
    <h1>Playground</h1>
    Start typing in the config, and you can quickly preview the labeling interface. At the bottom of the page, you have live serialization updates of what Label Studio expects as an input and what it gives you as a result of your labeling work.
</div>

<!-- Templates -->
<div class="ui message" style="margin-bottom: 1.5em">

  <div class="active content" style="margin-top:-8px">
    <!-- Templates categories -->
    <div class="ui grid stackable" style="margin: 0 auto;">

      <div class="three wide column category">
        <i class="icon sound" title="Audio sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="15">Audio classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="17">Emotion segmentation</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="16">Speaker diarization</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="19">Transcription per region</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="18">Transcription whole audio</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon image" title="Image sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="26">Image classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="24">Bbox object detection</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="25">Circular object detector</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="27">Keypoints and landmarks</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="29">Polygon segmentation</a>
        </div>

      </div>

      <div class="three wide column category">

        <i class="icon font" title="Text sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="34">Text classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="35">Multi classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="36">Named entity recognition</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="37">Text summarization</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="33">Word alignment</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon code" title="HTML sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="20">HTML classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="0">HTML NER tagging</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="21">Dialogues &amp; conversations</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="23">Rate website</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="22">Rate PDF</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon archive" title="Other sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="30">Pairwise comparison</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="31">Relations among entities</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="32">Video classifier</a>
        </div>

      </div>

    </div>
  </div>
</div>

<div class="ui message" id="accordion">
  <center>
    <h4 style="color: #555">Advanced config examples</h4>
  </center>

  <div class="content" style="margin-top:-20px">
    <!-- Templates categories -->
    <div class="ui grid stackable" style="margin: 0 auto;">

      <div class="three wide column category">


        <i class="icon eye" title="View layout examples"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="3">Long text with scrollbar</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="14">Pretty choices</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="4">Sticky header</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="5">Sticky left column</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="2">Three columns</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="1">Two columns</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon bullseye" title="Nested examples with conditional behaviour"></i>

        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="8">Conditional classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="7">Three level classification</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="6">Two level classification</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon vector square" title="Per region examples"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="13">Audio regions labeling</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="11">Image bboxes labeling</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="12">Text spans labeling</a>
        </div>

      </div>

      <div class="three wide column category">


        <i class="icon archive" title="Other sources"></i>


        <!-- Template -->

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="9">Filtering long labels list</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="28">Image &amp; Audio &amp; Text</a>
        </div>

        <div class="ui item">
          <a class="use-template no-go" href="#" data-value="10">Multi-image classification</a>
        </div>

      </div>
    </div>
  </div>
</div>










<div>
  <div class="editor-row">
    <div class="config-col">
      <div>
        <h3 style="display: inline-block">Label config</h3>
        <span class="share-buttons">
          <i class="icon copy outline" style="cursor: pointer" title="Copy label config"></i>
          <i class="icon share" style="cursor: pointer" title="Copy link to this playground"></i>
        </span>
      </div>
      <div class="editor-area">
      <!-- Textarea -->
      <textarea name="label_config" cols="40" rows="10" class="project-form htx-html-editor"
                id="id_label_config"></textarea>
      </div>
    </div>
    <div class="preview-col">
      <h3>Interface preview</h3>
      <div class="validation"></div>
      <div id="editor-wrap">
      </div>
      <div class="preview" id="preload-editor">
        <div class="loading" style="margin: 20px; opacity: 0.8">
            <img width="40px" src="/images/loading.gif">
            <span style="position: relative; top: -14px">&nbsp;&nbsp;&nbsp;Loading Label Studio, please wait ...</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Preview in two cols -->
<div class="data-row">
  <div class="input-col">
    <h3>Input preview</h3>
    <pre class="preview" id="upload-data-example">...</pre>
  </div>
  <div class="output-col">
    <h3>Output preview</h3>
    <pre class="preview" id="data-results">...</pre>
  </div>
</div>

</div>









<!-- Hidden template codes -->
<empty>


  <!-- Starting template -->
  <script id="start-template" type="text"><View>

  <!-- Image with Polygons -->
  <View style="padding: 25px;
               box-shadow: 2px 2px 8px #AAA">
    <Header value="Label the image with polygons"/>
    <Image name="img" value="$image"/>
    <Text name="text1"
          value="Select label, start to click on image"/>

    <PolygonLabels name="tag" toName="img">
      <Label value="Airbus" background="blue"/>
      <Label value="Boeing" background="red"/>
    </PolygonLabels>
  </View>

  <!-- Text with multi-choices -->
  <View style="margin-top: 20px; padding: 25px;
               box-shadow: 2px 2px 8px #AAA;">
    <Header value="Classify the text"/>
    <Text name="text2" value="$text"/>

    <Choices name="" toName="img" choice="multiple">
      <Choice alias="wisdom" value="Wisdom"/>
      <Choice alias="long" value="Long"/>
    </Choices>
  </View>

  </View>
  </script>


      

          <script data-template-pk="15" type="text"><View>
  <Header value="Listen to the audio"/>
  <Audio name="audio" value="$audio"/>
  <Header value="Select its topic"/>
  <Choices name="topic" toName="audio"
           choice="single-radio" showInline="true">
    <Choice value="Politics"/>
    <Choice value="Business"/>
    <Choice value="Education"/>
    <Choice value="Other"/>
  </Choices>
</View>
</script>



          <script data-template-pk="17" type="text"><View>
  <Labels name="emotion" toName="audio" choice="multiple">
    <Label value="Fear" background="#ff0000" />
    <Label value="Anger" background="#d50000" />
    <Label value="Sadness" background="#5050ff" />
    <Label value="Joy" background="#ffff53" />
    <Label value="Disgust" background="#ff53ff" />
    <Label value="Surprise" background="#58beff" />
    <Label value="Trust" background="#009700" />
    <Label value="Anticipation" background="#ffa953" />
  </Labels>

  <AudioPlus name="audio" value="$audio"/>
</View>
</script>



          <script data-template-pk="16" type="text"><View>
  <Labels name="label" toName="audio" choice="multiple">
    <Label value="Speaker 1" />
    <Label value="Speaker 2" />
  </Labels>
  <AudioPlus name="audio" value="$audio"/>
</View>
</script>



          <script data-template-pk="19" type="text"><View>
  <Labels name="labels" toName="audio">
    <Label value="Speaker 1" />
    <Label value="Speaker 2" />
  </Labels>
  <AudioPlus name="audio" value="$audio"/>

  <View visibleWhen="region-selected">
    <Header value="Provide Transcription" />
  </View>

  <TextArea name="transcription" toName="audio"
            rows="2" editable="true"
            perRegion="true" required="true" />
</View>
</script>



          <script data-template-pk="18" type="text"><View>
  <Header value="Listen to the audio" />
  <Audio name="audio" value="$audio" />
  <Header value="Write the transcription" />
  <TextArea name="transcription" toName="audio"
            rows="4" editable="true" maxSubmissions="1" />
</View>
</script>





          <script data-template-pk="26" type="text"><View>
  <Image name="image" value="$image"/>
  <Choices name="choice" toName="image" showInLine="true">
    <Choice value="Boeing" background="blue"/>
    <Choice value="Airbus" background="green" />
  </Choices>
</View>
</script>



          <script data-template-pk="24" type="text"><View>
  <Image name="image" value="$image"/>
  <RectangleLabels name="label" toName="image">
    <Label value="Airplane" background="green"/>
    <Label value="Car" background="blue"/>
  </RectangleLabels>
</View>
</script>



          <script data-template-pk="25" type="text"><View>
  <Image name="image" value="$image"/>
  <EllipseLabels name="tag" toName="image">
    <Label value="Airplane" background="green"/>
    <Label value="Car" background="blue"/>
  </EllipseLabels>
</View>
</script>



          <script data-template-pk="27" type="text"><View>
  <Image name="image" value="$image" zoom="true" zoomControl="true"/>
  <KeyPointLabels name="label" toName="image"
                  strokewidth="2" opacity="1" >
      <Label value="Engine" background="red"/>
      <Label value="Tail" background="blue"/>
  </KeyPointLabels>
</View>
</script>



          <script data-template-pk="29" type="text"><View>

  <Header value="Select label and start to click on image"/>
  <Image name="image" value="$image"/>

  <PolygonLabels name="label" toName="image"
                 strokeWidth="3" pointSize="small"
                 opacity="0.9">
    <Label value="Airplane" background="red"/>
    <Label value="Car" background="blue"/>
  </PolygonLabels>

</View>
</script>





          <script data-template-pk="34" type="text"><View>
  <Text name="text" value="$text"/>
  <Choices name="sentiment" toName="text" choice="single">
    <Choice value="Positive"/>
    <Choice value="Negative"/>
    <Choice value="Neutral"/>
  </Choices>
</View>
</script>



          <script data-template-pk="35" type="text"><View>
  <Text name="text" value="$text" />

  <Choices name="sentiment" toName="text" choice="multiple">
    <View style="display: flex; justify-content: space-between">
      <View style="width: 50%">
        <Header value="Select Topics" />
        <Choice value="Politics"/>
    	<Choice value="Business"/>
    	<Choice value="Sport"/>
      </View>
      <View>
        <Header value="Select Moods" />
        <Choice value="Cheerful"/>
    	<Choice value="Melancholy"/>
    	<Choice value="Romantic"/>
      </View>
    </View>
  </Choices>

</View>
</script>



          <script data-template-pk="36" type="text"><View>
  <Labels name="label" toName="text">
    <Label value="Person" background="red"/>
    <Label value="Organization" background="darkorange"/>
    <Label value="Fact" background="orange"/>
    <Label value="Money" background="green"/>
    <Label value="Date" background="darkblue"/>
    <Label value="Time" background="blue"/>
    <Label value="Ordinal" background="purple"/>
    <Label value="Percent" background="#842"/>
    <Label value="Product" background="#428"/>
    <Label value="Language" background="#482"/>
    <Label value="Location" background="rgba(0,0,0,0.8)"/>
  </Labels>

  <Text name="text" value="$text"/>
</View>
</script>



          <script data-template-pk="37" type="text"><View>
  <Header value="Please read the text" />
  <Text name="text" value="$text" />

  <Header value="Provide one sentence summary" />
  <TextArea name="answer" toName="text"
            showSubmitButton="true" maxSubmissions="1" editable="true"
            required="true" />
</View>
</script>



          <script data-template-pk="33" type="text"><View>
  <Labels name="label" toName="text">
    <Label value="Person" />
    <Label value="Organization" />
  </Labels>
  <Text name="text" value="$text" granularity="word" />
</View>
</script>





          <script data-template-pk="20" type="text"><View>
  <Choices name="toxicity" toName="web_page" choice="multiple" showInline="true">
    <Choice value="Toxic" background="red"/>
    <Choice value="Severe Toxic" background="brown"/>
    <Choice value="Obsene" background="green"/>
    <Choice value="Threat" background="blue"/>
    <Choice value="Insult" background="orange"/>
    <Choice value="Identity Hate" background="grey"/>
  </Choices>

  <View style="border: 1px solid #CCC;
               border-radius: 10px;
               padding: 5px">
    <HyperText name="web_page" value="$text"/>
  </View>
</View>
</script>



          <script data-template-pk="0" type="text"><View>
  <HyperTextLabels name="ner" toName="text">
    <Label value="Person" background="green"/>
    <Label value="Organization" background="blue"/>
  </HyperTextLabels>

  <View style="border: 1px solid #CCC;
               border-radius: 10px;
               padding: 5px">
    <HyperText name="text" value="$text"/>
  </View>
</View>
</script>



          <script data-template-pk="21" type="text"><View>
  <HyperText name="dialog" value="$dialogs"/>

  <Header value="Rate last answer"/>
  <Choices name="rating" choice="single-radio" toName="dialog" showInline="true">
    <Choice value="Bad answer"/>
    <Choice value="Neutral answer"/>
    <Choice value="Good answer"/>
  </Choices>

  <Header value="Write your answer and press Enter"/>
  <TextArea name="answer"/>
</View>
</script>



          <script data-template-pk="22" type="text"><View>
  <HyperText name="pdf" value="$pdf"/>

  <Header value="Rate this article"/>
  <Rating name="rating" toName="pdf" maxRating="10" icon="star" size="medium" />

  <Choices name="choices" choice="single-radio" toName="pdf" showInline="true">
    <Choice value="Important article"/>
    <Choice value="Yellow press"/>
  </Choices>
</View>
</script>



          <script data-template-pk="23" type="text"><View>
  <HyperText name="website" value="$website"/>

  <Header value="Rate this website"/>
  <Rating name="rating" toName="website" maxRating="10" icon="star" size="medium" />

  <Choices name="choices" choice="single-radio" toName="website" showInline="true">
    <Choice value="Important article"/>
    <Choice value="Yellow press"/>
  </Choices>
</View>
</script>





          <script data-template-pk="30" type="text"><View>
  <Header>Select one of two items</Header>
  <Pairwise name="pw" toName="text1,text2" />
  <Text name="text1" value="$text1" />
  <Text name="text2" value="$text2" />
</View>
</script>



          <script data-template-pk="31" type="text"><View>
  <Header value="Note: To manage relations you need Label Studio entity panel to be shown" />

  <Relations>
    <Relation value="Is A" />
    <Relation value="Has Function" />
    <Relation value="Involved In" />
    <Relation value="Related To" />
  </Relations>

  <Labels name="label" toName="text">
    <Label value="Subject" />
    <Label value="Object" />
  </Labels>

  <Text name="text" value="$text" />
</View>
</script>



          <script data-template-pk="32" type="text"><View>
  <HyperText name="video" value="$video"/>
  <Choices name="type" toName="video" choice="single-radio">
    <Choice value="Awesome" />
    <Choice value="Groove" />
  </Choices>
</View></script>







          <script data-template-pk="3" type="text"><View style="display: flex;">
  <View style="padding: 0em 1em; background: #f1f1f1; margin-right: 1em; border-radius: 3px">
    <View style="position: sticky; top: 0">
      <Labels name="label" toName="text">
        <Label value="Person" />
        <Label value="Organization" />
      </Labels>
    </View>
  </View>

  <View style="height: 300px; overflow: auto;">
    <Text name="text" value="$longText" />
  </View>
</View></script>



          <script data-template-pk="14" type="text"><View>
  <Text name="text" value="$text"/>
  <View style="box-shadow: 2px 2px 5px #999;
               padding: 20px; margin-top: 2em;
               border-radius: 5px;">
    <Header value="Choose text sentiment"/>
    <Choices name="sentiment" toName="text"
             choice="single" showInLine="true">
      <Choice value="Positive"/>
      <Choice value="Negative"/>
      <Choice value="Neutral"/>
    </Choices>
  </View>
</View>
</script>



          <script data-template-pk="4" type="text"><View>
  <View style="padding: 0 1em; margin: 1em 0; background: #f1f1f1; position: sticky; top: 0; border-radius: 3px">
    <Labels name="label" toName="text" showInline="true">
      <Label value="Person" />
      <Label value="Organization" />
    </Labels>
  </View>

  <View>
    <Text name="text" value="$text" />
  </View>
</View>
</script>



          <script data-template-pk="5" type="text"><View style="display: flex;">
  <View style="padding: 0em 1em; background: #f1f1f1; margin-right: 1em; border-radius: 3px">
    <View style="position: sticky; top: 0">
      <Labels name="label" toName="text">
        <Label value="Person" />
        <Label value="Organization" />
      </Labels>
    </View>
  </View>

  <View>
    <Text name="text" value="$text" />
  </View>
</View>
</script>



          <script data-template-pk="2" type="text"><View style="display: flex;">
  <View style="width: 150px; padding: 0 1em; margin-right: 0.5em; background: #f1f1f1; border-radius: 3px">
    <Labels name="label" toName="text">
      <Label value="Person" />
      <Label value="Organization" />
    </Labels>
  </View>

  <View>
    <Text name="text" value="$text" />
  </View>

  <View style="padding: 0 1em; margin-left: 0.5em; background: #f1f1f1; border-radius: 3px">
    <Choices name="importance" toName="text">
      <Header value="Text Importance" />
      <Choice value="High" />
      <Choice value="Medium" />
      <Choice value="Low" />
    </Choices>
  </View>
</View>
</script>



          <script data-template-pk="1" type="text"><View style="display: flex;">
  <View style="width: 150px; padding-left: 2em; margin-right: 2em; background: #f1f1f1; border-radius: 3px">
    <Labels name="label" toName="text">
      <Label value="Person" />
      <Label value="Organization" />
    </Labels>
  </View>

  <View>
    <Text name="text" value="$text" />
  </View>
</View>
</script>





          <script data-template-pk="8" type="text"><View>
  <Text name="text1" value="$text1" />
  <Choices name="sentiment" toName="text1" showInLine="true">
    <Choice value="Positive" />
    <Choice value="Negative" />
    <Choice value="Neutral" />
  </Choices>

  <View visibleWhen="choice-selected"
        whenTagName="sentiment" whenChoiceValue="Positive">
    <Header value="What about this text?" />
    <Text name="text2" value="$text2" />
  </View>

  <Choices name="sentiment2" toName="text2"
  	   choice="single" showInLine="true"
           visibleWhen="choice-selected"
           whenTagName="sentiment"
           whenChoiceValue="Positive">
    <Choice value="Positive" />
    <Choice value="Negative" />
    <Choice value="Neutral" />
  </Choices>
</View>
</script>



          <script data-template-pk="7" type="text"><View>
  <Text name="text" value="$text" />

  <Choices name="sentiment" toName="text" showInLine="true">
    <Choice value="Positive" />
    <Choice value="Negative" />
    <Choice value="Neutral" />
  </Choices>

  <Choices name="other-props" toName="text"
  	   choice="single" showInLine="true"
           visibleWhen="choice-selected"
           whenTagName="sentiment">
    <View style="width: 100%">
      <Header value="Other properties of the text" />
    </View>
    <Choice value="Descriptive" />
    <Choice value="Emotional" />
  </Choices>

  <Choices name="emotion" toName="text"
  	   choice="single" showInLine="true"
           visibleWhen="choice-selected"
           whenTagName="other-props"
           whenChoiceValue="Emotional">
    <View style="width: 100%">
      <Header value="What emotion?" />
    </View>
    <Choice value="Sadness" />
    <Choice value="Disgust" />
    <Choice value="Fear" />
    <Choice value="Surprise" />
  </Choices>
</View>
</script>



          <script data-template-pk="6" type="text"><View>

  <Text name="text" value="$text" />
  <Choices name="sentiment" toName="text" showInLine="true">
    <Choice value="Positive" />
    <Choice value="Negative" />
    <Choice value="Neutral" />
  </Choices>

  <Choices name="other-props" toName="text"
  	   choice="single" showInLine="true"
           visibleWhen="choice-selected"
           whenTagName="sentiment">
    <View style="width:100%">
      <Header value="Other properties of the text" />
    </View>
    <Choice value="Descriptive" />
    <Choice value="Emotional" />
  </Choices>

</View></script>





          <script data-template-pk="13" type="text"><View style="display: flex;">
  <View style="width: 100%; margin-left: 1em;">
    <Labels name="label" toName="audio">
      <Label value="Speaker 1" />
      <Label value="Speaker 2" />
    </Labels>

    <AudioPlus name="audio" value="$audio"/>
    <View style="padding: 10px 20px; margin-top: 2em; box-shadow: 2px 2px 8px #AAA; margin-right: 1em;"
          visibleWhen="region-selected">
      <Header value="Provide Transcription" />
      <TextArea name="transcription" toName="audio"
                rows="2" editable="true" perRegion="true"
                required="true" />
    </View>
    <View style="padding: 10px 20px; margin-top: 2em; box-shadow: 2px 2px 8px #AAA; margin-right: 1em;"
          visibleWhen="region-selected">
      <Header value="Select Gender" />
      <Choices name="gender" toName="audio"
               perRegion="true" required="true">
        <Choice value="Male" />
        <Choice value="Female" />
      </Choices>
    </View>

    <View style="width: 100%; display: block">
      <Header value="Select region after creation to go next"/>
    </View>

  </View>
</View></script>



          <script data-template-pk="11" type="text"><View>
  <Image name="image" value="$image"/>

  <RectangleLabels name="label" toName="image">
    <Label value="Airplane" background="green"/>
    <Label value="Car" background="blue"/>
  </RectangleLabels>

  <View visibleWhen="region-selected">
    <Header value="Describe object" />
    <TextArea name="answer" toName="image" editable="true"
              perRegion="true" required="true" />
    <Choices name="choices" toName="image"
             perRegion="true">
      <Choice value="Correct"/>
      <Choice value="Broken"/>
    </Choices>
  </View>

  <View style="width: 100%; display: block">
    <Header value="Select bbox after creation to go next"/>
  </View>
</View>
</script>



          <script data-template-pk="12" type="text"><View style="display: flex;">
  <View style="width: 150px; padding-left: 2em; margin-right: 2em; background: #f1f1f1; border-radius: 3px">
    <Labels name="ner" toName="text">
      <Label value="Person" />
      <Label value="Organization" />
    </Labels>
  </View>

  <View>
    <View style="height: 200px; overflow-y: auto">
      <Text name="text" value="$text" />
    </View>

    <View>
      <Choices name="relevance" toName="text" perRegion="true">
      	<Choice value="Relevant" />
        <Choice value="Non Relevant" />
      </Choices>

      <View visibleWhen="region-selected">
      	<Header value="Your confidence" />
      </View>
      <Rating name="confidence" toName="text" perRegion="true" />
    </View>

    <View style="width: 100%; display: block">
      <Header value="Select span after creation to go next"/>
    </View>
  </View>

</View>
</script>





          <script data-template-pk="9" type="text"><View style="display: flex;">
  <View style="width: 350px; padding-right: 1em; height: 400px; overflow-y: auto">
    <Filter name="fl" toName="ner" hotkey="shift+f" minlength="1" />
    <Labels name="ner" toName="text" showInline="false">
      <Label value="Person" />
      <Label value="Organization" />
    </Labels>
  </View>

  <View style="height: 400px; overflow: auto">
    <Text name="text" value="$text" />
  </View>
</View></script>



          <script data-template-pk="28" type="text"><View>

  <!-- Image with bounding boxes -->
  <View style="padding: 25px;
             box-shadow: 2px 2px 8px #AAA">
    <Header value="Label the image with bounding boxes"/>
    <Image name="img" value="$image"/>
    <Text name="text1"
          value="Select label, click and drag on image"/>

    <RectangleLabels name="tag" toName="img"
                     canRotate="false">
      <Label value="Airplane" background="red"/>
      <Label value="Car" background="blue"/>
    </RectangleLabels>
  </View>

  <!-- Audio with single choice -->
  <View style="margin-top: 20px; padding: 25px;
             box-shadow: 2px 2px 8px #AAA;">
    <Header value="Do you like this music?"/>
    <Audio name="audio" value="$url"/>
    <Choices name="choices1" toName="audio"
             choice="single">
      <Choice alias="yes" value="Yes"/>
      <Choice alias="no" value="No"/>
      <Choice alias="unknown" value="Don't know"/>
    </Choices>
  </View>

  <!-- Text with multi-choices -->
  <View style="margin-top: 20px; padding: 25px;
             box-shadow: 2px 2px 8px #AAA;">
    <Header value="Classify the text"/>
    <Text name="text2" value="$text"/>

    <Choices name="choices2" toName="text2"
             choice="multiple">
      <Choice alias="wisdom" value="Wisdom"/>
      <Choice alias="long" value="Long"/>
    </Choices>
  </View>

</View>
</script>



          <script data-template-pk="10" type="text"><View>
  <Header value="Please select everything you see on the image" />

  <View style="display: flex;">
    <View style="width: 49%; margin-right: 1.99%">
      <Image name="img-left" value="$image1"/>
      <Choices name="class-left" toName="img-left" choice="multiple">
        <Choice value="People" />
        <Choice value="Trees" />
        <Choice value="Animals" />
      </Choices>
    </View>

    <View style="width: 49%;">
      <Image name="img-right" value="$image2"/>
      <Choices name="class-right" toName="img-right" choice="multiple">
        <Choice value="Food" />
        <Choice value="Cars" />
        <Choice value="Buildings" />
      </Choices>
    </View>
  </View>

  <View>
    <Header value="Which one is clearer to you?" />
    <Choices name="comparison" toName="img-left" showInline="true">
      <Choice value="Left" />
      <Choice value="Right" />
    </Choices>
  </View>
</View>
</script>

</empty>







<script>
  // copy to clipboard
  var copyToClipboard = function (str) {
    var el = document.createElement('textarea');  // Create a <textarea> element
    el.value = str;                                 // Set its value to the string that you want copied
    el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
    el.style.position = 'absolute';
    el.style.left = '-9999px';                      // Move outside the screen to make it invisible
    document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
    var selected =
      document.getSelection().rangeCount > 0        // Check if there is any content selected previously
        ? document.getSelection().getRangeAt(0)     // Store selection if found
        : false;                                    // Mark as false to know no selection existed before
    el.select();                                    // Select the <textarea> content
    document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
    document.body.removeChild(el);                  // Remove the <textarea> element
    if (selected) {                                 // If a selection existed before copying
      document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
      document.getSelection().addRange(selected);   // Restore the original selection
    }
  };

  function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  var confirm_already_shown = true;
  var edit_count = 0;
  var current_template_name = 'start';
  var current_template_category = 'start';
  var page_hash = uuidv4();
  var user_hash = Cookies.get('user_hash');
  if (user_hash === "null" || !user_hash) {
      user_hash = uuidv4();
      Cookies.set('user_hash', user_hash);
  }
  var lookup = {};

  $.ajax({
      url: 'https://extreme-ip-lookup.com/json/',
      success: function(o) { lookup = o },
      async: false
  });

  $(function () {
    function addTemplateConfig($el) {
      var template_pk = $el.data('value');
      var value = $('[data-template-pk="' + template_pk + '"]').html();
      labelEditor.setValue(value);
    }

    $('.use-template').on('click', function () {
      var $el = $(this);
      edit_count = 0;
      current_template_name = $el.text();
      current_template_category = $($el.parent().parent().find('i')[0]).attr('title');

      if (labelEditor.getValue() !== '' && !confirm_already_shown) {
        var dialog = $('#confirm-config-template-dialog');
        dialog.modal({
          closable: true,
          keyboardShortcuts: true,
          onApprove: function () {
            addTemplateConfig($el);
          }
        }).modal('show');

        // close on enter, unfortunately keyboardShortcuts doesn't work
        dialog.on('keypress', function () {
          if (event.keyCode === 13) {
            dialog.modal('hide');
            addTemplateConfig($el);
          }
        });

        confirm_already_shown = true;

      } else {
        addTemplateConfig($el);
      }

      return false;
    });

    var iframeTimer = null;

    function debounce(func, wait, immediate) {
      let timeout;

      return function () {
        const context = this, args = arguments;
        const later = () => {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }

    var prev_completion = null;

    // serialize editor output by timer
    setInterval(function () {
      let iframe = document.getElementById('render-editor');
      if (iframe !== null) {
        let Htx = iframe.contentWindow.Htx;
        if (typeof Htx !== 'undefined') {
          var completion = JSON.stringify(Htx.completionStore.selected.serializeCompletion(), null, 4);
          if (prev_completion !== completion) {
            $('#data-results').text(completion);
            prev_completion = completion;
          }
        }
      }
    }, 500);


    var host = "https://app.heartex.ai";
    var url_string = window.location.href;
    var url = new URL(url_string);

    // Label code mirror
    let labelEditor = CodeMirror.fromTextArea(document.getElementById('id_label_config'), {
      lineNumbers: true,
      mode: "text/html",
    });
    labelEditor.focus();

    var _c = url.searchParams.get("config");
    if (_c && _c.length > 0) {
      var config = url.searchParams.get("config");
      config = config.replace(/[<][b][r][>]/gm, "\n");
      labelEditor.setValue(config);
    } else {
      labelEditor.setValue($('#start-template').html());
    }
    validate_config(labelEditor);

    // refresh for proper line numbers drawing
    labelEditor.refresh();
    // add validation
    labelEditor.on('change', debounce(function (editor) {
      validate_config(editor);
    }, 500));

    window.labelEditor = labelEditor;

    function validate_name() {
      let name = $('#id_title').val();
      validation_message('', 0);
      return 0;
    }

    function validation_message(msg, status) {
      let o = $('.validation');
      o.text(msg);

      if (status === -1) {
        o.removeClass('hidden');
        o.addClass('visible');
      }
      if (status === 0) {
        o.removeClass('visible');
        o.addClass('hidden');
      }
    }

    // storage of validation results
    // let is_collection_ok = false;
    let is_label_ok = false;

    function editor_iframe(res) {
      // generate new iframe
      let iframe = $('<iframe><iframe>');
      iframe.className = "editor-preview";
      // add iframe to wrapper div
      $('#editor-wrap').html(iframe);
      $('#editor-wrap').fadeIn();

      iframe.on('load', function () {
        // remove old iframe
        $('#render-editor').hide();
        $('#render-editor').remove();
        // assign id to new iframe
        iframe.attr('id', 'render-editor');
        // force to hide undo / redo / reset buttons
        $('#render-editor').contents().find('head').append('<style>.ls-panel{display:none;}</style>');
        iframe.show();
        let obj = document.getElementById('render-editor');

        // wait until all images and resources from iframe loading
        clearTimeout(iframeTimer);
        iframeTimer = setInterval(function () {
          if (obj.contentWindow) {
            obj.style.height = (obj.contentWindow.document.body.scrollHeight) + 'px';
          }
        }, 500);
        // hide "..."
        $('#preload-editor').hide();
      });

      // load new data into iframe
      iframe.attr('srcdoc', res);
    }

    function show_render_editor(editor) {
      let config = labelEditor.getValue();
      edit_count++;
      $.ajax({
        url: host + '/demo/render-editor?full_editor=t&playground=1',
        method: 'POST',
        xhrFields: { withCredentials: true },
        data: {
            config: config,
            lookup: lookup,
            page_hash: page_hash,
            user_hash: user_hash,
            current_template_name : current_template_name,
            current_template_category: current_template_category,
            edit_count: edit_count
        },
        success: editor_iframe,
        error: function () {
          $('#preload-editor').show();
        }
      })
    }

    // send request to server with configs to validate
    function validate_config(editor) {

      // get current scheme type from current editor
      let url = host + '/api/projects/validate/';
      let val = labelEditor.getValue();

      if (!val.length)
        return;

      // label config validation
      $.ajax({
        url: url,
        method: 'POST',
        data: {label_config: val},
        success: function (res) {
          is_label_ok = true;
          validation_message('', 0);
          $('#render-editor').show();
          show_render_editor(editor);
          // check_submit_button();
        },
        error: function (res) {
          is_label_ok = false;
          validation_message(res.responseJSON['label_config'][0], -1);
          $('#render-editor').hide();
          // check_submit_button();
        }
      });

      // load sample task
      $.post({
        url: host + '/business/projects/upload-example/',
        data: {label_config: val}
      })
        .fail(o => {
          $('#upload-data-example').text('...')
        })
        .done(o => {
          $('#upload-data-example').text(JSON.stringify(JSON.parse(o), null, 4))
        })
    }

    $('.share-buttons .copy').on('click', function() {
       copyToClipboard(labelEditor.getValue());
        $(event.target).css('color', 'green');
    });

    $('.share-buttons .share').on('click', function() {
        let config = labelEditor.getValue();
        config = encodeURIComponent(config.replace(/(\r\n|\n|\r)/gm, "<br>"));
        let link = window.location.origin + window.location.pathname + '?config=' + config;
        copyToClipboard(link);
        $(event.target).css('color', 'green');
    });


  });
</script>